<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01vue的基本使用</title>
		<!-- 导包 -->
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<!-- <div>{{goods}}</div> -->
		<!-- 模板 -->
		<div id="app">
			<div class="sum">{{1>1?3:4}}</div>
			<div class="val1">{{val1}}</div>
			<div class="val2">{{val2}}</div>
			<div class="goods">{{goods}}</div>
			<button @click="update()">更改goods</button>
			<div class="num" v-for="item in list">
				{{item}}
			</div>
			<div class="div1" v-if="isShow">{{isShow}}</div>
			<div class="count">计数器{{count}}</div>
		</div>
		
	</body>
</html>
<script>
	// vue ：面对数据编程
	const {createApp,ref} = Vue;
	// 创建一个app应用程序  application
	const app = createApp({
		// vue管理的数据
		data(){
			return {
				goods:'这是一个商品',
				val1:1,
				val2:2,
				list:[1,2,3],
				isShow:true,
				count:0
			}
		},
		// 方法
		methods:{
			sum(){
				return this.val1 + this.val2
			},
			update(){
				this.goods = '这是一堆商品'
			}
			
		},
		mounted(){
			setInterval(()=>{
				this.count++;
			},1000)
		}
	});
	// mvvm的思维模型，m：model数据，v:view视图，vm：viewModel视图数据连接层
	const vm = app.mount("#app")
</script>